<template>
    <div class="history-area">
        <a-modal title="快捷键操作" v-model:open="modalVisible" :footer="null" width="400px">
            <ul class="shortcut-list">
                <li v-for="(item, key) in operationText" :key="key" class="shortcut-list-item">
                    <span class="text">{{ item.text }}</span> <span class="bold">{{ item.shortcut }}</span>
                </li>
            </ul>
        </a-modal>

        <div class="operation-list">
            <a-tooltip>
                <template #title>
                    快捷键提示
                </template>
                <a-button shape="circle" @click="modalVisible = true">
                    <template #icon>
                        <QuestionOutlined />
                    </template>
                </a-button>
            </a-tooltip>
            <a-tooltip>
                <template #title>
                    撤销
                </template>
                <a-button shape="circle" @click="undoHistory" :disabled="undoIsDisabled">
                    <template #icon>
                        <UndoOutlined />
                    </template>
                </a-button>
            </a-tooltip>
            <a-tooltip>
                <template #title>
                    重做
                </template>
                <a-button shape="circle" @click="redoHistory" :disabled="redoIsDisabled">
                    <template #icon>
                        <RedoOutlined />
                    </template>
                </a-button>
            </a-tooltip>
        </div>
        <li v-for="(item, index) in histories" :key="item.id">
            <span :class="{ bold: index === historyIndex}">{{item.type}} - {{item.data.layerName || item.data.key}}</span>
        </li>
    </div>
</template>
<script setup lang="ts" name="HistoryArea">
import { computed, ref } from 'vue'
import { RedoOutlined, UndoOutlined, QuestionOutlined } from '@ant-design/icons-vue'
import { editorInfos } from '@/stores/editor'
import { operationText } from '@/plugins/dataOperations'
import pinia from '@/stores/index'

const modalVisible = ref(false)
const editorStore = editorInfos(pinia)
const histories = computed(() => editorStore.histories)
const historyIndex = computed(() => editorStore.historyIndex)
const undoIsDisabled = computed<boolean>(() => editorStore.checkUndoDisable)
const redoIsDisabled = computed<boolean>(() => editorStore.checkRedoDisable)
const undoHistory = () => {
    editorStore.undo()
}
const redoHistory = () => {
    editorStore.redo()
}
</script>
<style>
    .history-area {
        position: absolute;
        right: 0;
    }

    .operation-list {
        display: flex;
    }

    .shortcut-list {
        list-style-type: none;
        padding: 0;
        width: 300px;
        margin: 0 auto;
    }

    .shortcut-list-item {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .shortcut-list .text {
        color: rgba(0, 0, 0, .45)
    }

    .operation-list button {
        margin-left: 10px;
    }

    .history-area .bold {
        font-weight: bold;
    }

    .shortcut-list .bold {
        color: #1890ff;
    }
</style>
